<template>
    <div class="article">
        <div class="article-top">
            <div class="warp vh-center">
              <div class="article-img-box">
                <span class="article-img" :style="{backgroundImage:bg_image}"/>
              </div>
            </div>
            <div class="article-detail">
                <h3 class="title" @click="goto_article">{{title}}</h3>
                <div class="tag-and-time">
                  <span class="article-tag">{{tag}}</span>
                  <span class="article-created-time">{{created_at}}</span>
                </div>
            </div>
        </div>
        <div class="article-content" @click="goto_article">
            {{brief}}
        </div>
    </div>
</template>
<script>
import moment from 'moment';
export default {
  name: 'ArticleSummary',
  props: {
    id: Number,
    title: {
      type: String,
      default: 'Undefined',
    },
    tag: {
      type: String,
      default: 'Undefined',
    },
    cover: {
      type: String,
    },
    createdAt: {
      type: String,
    },
    brief: {
      type: String,
      default: '作者有点懒，暂无简介...',
    },
  },
  computed: {
    created_at: function () {
      return moment(this.createdAt).format('L');
    },
    bg_image: function () {
      return `url(${this.cover || 'https://gw.alicdn.com/tfs/TB15lFuuGmWBuNjy1XaXXXCbXXa-900-500.jpg'})`;
    },
  },
  methods: {
    goto_article: function () {
      this.$router.push(`/detail/${this.id}`);
    },
  },
};
</script>
<style src="./style.scss" lang="scss" scoped></style>
